<template>
	<view class="postjob">
		<u-navbar>
			<view slot="left" class="align-center">
				<image @click="$tools.back()" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx"></image>
				<!-- <view class="align-center" style="margin-left: 32rpx; width: 400rpx; background: #f5f6fa; border-radius: 8rpx; padding: 16rpx 22rpx">
					<view class="flex-center1" style="margin-right: 10rpx">
						<image src="@/static/index/serach1.png" style="width: 30rpx; height: 28rpx"></image>
					</view>
					<input type="text" placeholder="搜索工种" style="font-weight: 600; font-size: 28rpx; color: #242424" />
				</view> -->
			</view>
		</u-navbar>
		<view class="flex-column" style="height: 100%">
			<view class="flex" style="flex: 1; overflow: auto; background-color: #fff">
				<view style="width: 250rpx">
					<view @click="changegw(item, index)" v-for="(item, index) in list" :key="index" class="btn3" :class="{ btn4: current == index }" style="padding: 24rpx 32rpx">
						{{ item.name }}
					</view>
				</view>
				<view style="flex: 1; padding: 32rpx 0; background-color: #f5f6fa">
					<view style="padding: 0 38rpx; background-color: #f5f6fa">
						<view class="flex-between flex-wrap">
							<view
								@click="type != 2 ? changegw1(item, index) : changegw2(item, index)"
								class="flex-center1 btn"
								v-for="(item, index) in list1"
								:key="index"
								style="margin-bottom: 32rpx"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="type != 2" style="height: 520rpx; box-shadow: 0rpx -8rpx 26rpx 0rpx rgba(229, 229, 229, 0.5); padding: 34rpx 32rpx; overflow: auto">
				<view class="flex-between" style="margin-bottom: 34rpx">
					<text style="font-weight: 600; font-size: 32rpx; color: #333333">我选择的岗位</text>
					<text style="font-weight: 400; font-size: 28rpx; color: #999999">已选{{ list2.length }}/7</text>
				</view>
				<view class="flex-wrap" style="min-height: 240rpx">
					<view v-for="(item, index) in list2" :key="index" style="padding: 0 10rpx; margin-bottom: 40rpx">
						<view class="flex-center1" style="width: 202rpx; height: 76rpx; background: rgba(19, 101, 249, 0.1); border-radius: 8rpx; font-size: 28rpx; color: #1365f9">
							{{ item.name }}
						</view>
					</view>
				</view>
				<view class="flex-between1">
					<view
						@click="clear"
						class="flex-center1"
						style="font-size: 32rpx; color: #1365f9; width: 220rpx; height: 96rpx; background: #ffffff; border-radius: 8rpx; border: 2rpx solid #1365f9"
					>
						清除
					</view>
					<view @click="setgw()" class="flex-center1" style="font-size: 32rpx; color: #ffffff; width: 426rpx; height: 96rpx; background: #1365f9; border-radius: 8rpx">
						确定选择
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			list: [],
			list1: [],
			list2: [],
			type: ''
		};
	},
	onShow() {
		this.getgw();
	},
	onLoad(option) {
		this.type = option.value;
	},
	methods: {
		getgw(id) {
			this.$request('front/search/getPostType', {
				pId: id | 0
			}).then((res) => {
				if (id) {
					console.log(res, '列表2');
					this.list1 = res.obj;
				} else {
					console.log(res, '列表1');
					this.list = res.obj;
					this.getgw(res.obj[0].id);
				}
			});
		},
		changegw(item, index) {
			this.current = index;
			this.getgw(item.id);
		},
		changegw1(item, index) {
			let type = false;
			this.list2.map((item1) => {
				if (item.id == item1.id) type = true;
			});
			if (type) return this.$tools.toast('已选择');
			this.current1 = index;
			item.show = true;
			if (this.list2.length == 7) return this.$tools.toast('已选满');
			this.list2.push(item);
		},
		changegw2(item, index) {
			this.$tools.prePage().form.jobName = item.name;
			this.$tools.prePage().form.jobType = item.id;
			this.$tools.back();
		},
		clear() {
			this.list2 = [];
		},
		setgw() {
			const list = [];
			this.list2.map((item, index) => {
				list[index] = item.id;
			});
			const jobType = list.join(',');
			this.$tools.prePage().jobType = jobType;
			this.$tools.back();
		}
	}
};
</script>

<style lang="less" scoped>
.postjob {
	padding-top: 180rpx;
	height: 100vh;

	.btn {
		width: 202rpx;
		height: 76rpx;
		background: #ffffff;
		border-radius: 8rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
	}
	.btn1 {
		width: 202rpx;
		height: 76rpx;
		background: rgba(19, 101, 249, 0.1);
		border-radius: 8rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #1365f9;
	}
	.btn3 {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		background-color: #fff;
	}
	.btn4 {
		font-weight: 500;
		font-size: 28rpx;
		color: #1365f9;
		background-color: #f5f6fa;
	}
}
</style>
